<!-- Created by henian.xu on 2017/7/4 0004. -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>breadcrumb</title>
    <link rel="stylesheet" href="../../static/css/app.css">
    <script
        src="https://cdn.bootcss.com/require.js/2.3.3/require.js"
        data-main="../../src/script/main.js"
    ></script>

    <script>
        function main() {
            require(['jquery', '../../src/script/components/menu.js', '../../src/script/components/dropdown.js'], function ($, menu, dropdown) {
//                $('.x-menu').xMenu();
            })
        }
    </script>
</head>
<body>

<!--<embed name="erroralert"
       width="1px" height="1px"
       allowscriptaccess="always"
       align="middle"
       src="http://c1.ifengimg.com/mappa/2016/08/18/39149784afc6ff385637057422f75c97.swf"
       type="application/x-shockwave-flash"/>-->

<!--<embed name="erroralert" style="position: fixed;top: -100px; left: -100px" width="1px" height="1px" type="application/x-shockwave-flash"/>-->

<div>折叠</div>
<!--折叠-->
<ul class="x-menu" data-trigger="click">
    <li class="x-menu-item">
        <div class="x-menu-item-label">
            <sapn><i class="x-icon">&#xf009;</i>菜单一</sapn>
        </div>
    </li>
    <li class="x-menu-item">
        <div class="x-menu-item-label x-menu-submenu-label"><span><i class="x-icon">&#xf00a;</i>菜单二</span></div>
        <ul class="x-menu-submenu">
            <li class="x-menu-item">
                <div class="x-menu-item-label">
                    <sapn>子项1</sapn>
                </div>
            </li>
            <li class="x-menu-item">
                <div class="x-menu-item-label x-menu-submenu-label"><span>子项2</span></div>
                <ul class="x-menu-submenu">
                    <li class="x-menu-item">
                        <div class="x-menu-item-label"><span>孙项1</span></div>
                    </li>
                    <li class="x-menu-item">
                        <div class="x-menu-item-label">
                            <sapn>孙项1</sapn>
                        </div>
                    </li>
                    <li class="x-menu-item">
                        <div class="x-menu-item-label"><span>孙项3</span></div>
                    </li>
                </ul>
            </li>
            <li class="x-menu-item">
                <div class="x-menu-item-label"><span>子项3</span></div>
            </li>
        </ul>
    </li>
    <li class="x-menu-item">
        <div class="x-menu-item-label"><span><i class="x-icon">&#xf00b;</i>菜单三</span></div>
    </li>
</ul>

<div>浮动</div>
<!--浮动-->
<ul class="x-menu x-menu-float" data-trigger="click">
    <li class="x-menu-item">
        <div class="x-menu-item-label"><span><i class="x-icon">&#xf009;</i>菜单一</span></div>
    </li>
    <li class="x-menu-item">
        <div class="x-menu-item-label x-menu-submenu-label"><span><i class="x-icon">&#xf00a;</i>菜单二</span></div>
        <ul class="x-menu-submenu">
            <li class="x-menu-item">
                <div class="x-menu-item-label"><span>子项1</span></div>
            </li>
            <li class="x-menu-item">
                <div class="x-menu-item-label x-menu-submenu-label"><span>子项2子项2</span></div>
                <ul class="x-menu-submenu">
                    <li class="x-menu-item">
                        <div class="x-menu-item-label"><span>孙项1</span></div>
                    </li>
                    <li class="x-menu-item">
                        <div class="x-menu-item-label x-menu-submenu-label"><span>孙项1孙项1</span></div>
                        <ul class="x-menu-submenu">
                            <li class="x-menu-item">
                                <div class="x-menu-item-label"><span>孙项1</span></div>
                            </li>
                            <li class="x-menu-item">
                                <div class="x-menu-item-label x-menu-submenu-label"><span>孙项1孙项1</span></div>
                                <ul class="x-menu-submenu">
                                    <li class="x-menu-item">
                                        <div class="x-menu-item-label"><span>孙项1</span></div>
                                    </li>
                                    <li class="x-menu-item">
                                        <div class="x-menu-item-label"><span>孙项1孙项1</span></div>
                                    </li>
                                    <li class="x-menu-item">
                                        <div class="x-menu-item-label"><span>孙项3</span></div>
                                    </li>
                                </ul>
                            </li>
                            <li class="x-menu-item">
                                <div class="x-menu-item-label"><span>孙项3</span></div>
                            </li>
                        </ul>
                    </li>
                    <li class="x-menu-item">
                        <div class="x-menu-item-label"><span>孙项3</span></div>
                    </li>
                </ul>
            </li>
            <li class="x-menu-item">
                <div class="x-menu-item-label"><span>子项3</span></div>
            </li>
        </ul>
    </li>
    <li class="x-menu-item">
        <div class="x-menu-item-label"><span><i class="x-icon">&#xf00b;</i>菜单三</span></div>
    </li>
</ul>

<div>导航</div>
<!--导航-->
<ul class="x-menu x-menu-nav">
    <li class="x-menu-item">
        <div class="x-menu-item-label"><span><i class="x-icon">&#xf009;</i>菜单一</span></div>
    </li>
    <li class="x-menu-item">
        <div class="x-menu-item-label x-menu-submenu-label"><span><i class="x-icon">&#xf00a;</i>菜单二</span></div>
        <ul class="x-menu-submenu">
            <li class="x-menu-item">
                <div class="x-menu-item-label"><span>子项1</span></div>
            </li>
            <li class="x-menu-item">
                <div class="x-menu-item-label x-menu-submenu-label"><span>子项2子项2</span></div>
                <ul class="x-menu-submenu">
                    <li class="x-menu-item">
                        <div class="x-menu-item-label"><span>孙项1</span></div>
                    </li>
                    <li class="x-menu-item">
                        <div class="x-menu-item-label x-menu-submenu-label"><span>孙项1孙项1</span></div>
                        <ul class="x-menu-submenu">
                            <li class="x-menu-item">
                                <div class="x-menu-item-label"><span>孙项1</span></div>
                            </li>
                            <li class="x-menu-item">
                                <div class="x-menu-item-label x-menu-submenu-label"><span>孙项1孙项1</span></div>
                                <ul class="x-menu-submenu">
                                    <li class="x-menu-item">
                                        <div class="x-menu-item-label"><span>孙项1</span></div>
                                    </li>
                                    <li class="x-menu-item">
                                        <div class="x-menu-item-label"><span>孙项1孙项1</span></div>
                                    </li>
                                    <li class="x-menu-item">
                                        <div class="x-menu-item-label"><span>孙项3</span></div>
                                    </li>
                                </ul>
                            </li>
                            <li class="x-menu-item">
                                <div class="x-menu-item-label"><span>孙项3</span></div>
                            </li>
                        </ul>
                    </li>
                    <li class="x-menu-item">
                        <div class="x-menu-item-label"><span>孙项3</span></div>
                    </li>
                </ul>
            </li>
            <li class="x-menu-item">
                <div class="x-menu-item-label"><span>子项3</span></div>
            </li>
        </ul>
    </li>
    <li class="x-menu-item">
        <div class="x-menu-item-label"><span><i class="x-icon">&#xf00b;</i>菜单三</span></div>
    </li>
</ul>

<div>下拉菜单</div>
<div class="x-dropdown" data-trigger="click">
    下拉菜单-左下<i class="x-icon">&#xf107;</i>
    <ul class="x-menu x-menu-float" data-placement="bottomLeft" data-trigger="click">
        <li class="x-menu-item">
            <div class="x-menu-item-label">
                <sapn><i class="x-icon">&#xf009;</i>菜单一</sapn>
            </div>
        </li>
        <li class="x-menu-item">
            <div class="x-menu-item-label x-menu-submenu-label"><span><i class="x-icon">&#xf00a;</i>菜单二</span></div>
            <ul class="x-menu-submenu">
                <li class="x-menu-item">
                    <div class="x-menu-item-label">
                        <sapn>子项1</sapn>
                    </div>
                </li>
                <li class="x-menu-item">
                    <div class="x-menu-item-label x-menu-submenu-label"><span>子项2</span></div>
                    <ul class="x-menu-submenu">
                        <li class="x-menu-item">
                            <div class="x-menu-item-label"><span>孙项1</span></div>
                        </li>
                        <li class="x-menu-item">
                            <div class="x-menu-item-label">
                                <sapn>孙项1</sapn>
                            </div>
                        </li>
                        <li class="x-menu-item">
                            <div class="x-menu-item-label"><span>孙项3</span></div>
                        </li>
                    </ul>
                </li>
                <li class="x-menu-item">
                    <div class="x-menu-item-label"><span>子项3</span></div>
                </li>
            </ul>
        </li>
        <li class="x-menu-item">
            <div class="x-menu-item-label"><span><i class="x-icon">&#xf00b;</i>菜单三</span></div>
        </li>
    </ul>
</div>

<div class="x-dropdown" data-trigger="hover">
    下拉菜单-中下<i class="x-icon">&#xf107;</i>
    <ul class="x-menu x-menu-float" data-placement="bottomCenter" data-trigger="hover">
        <li class="x-menu-item">
            <div class="x-menu-item-label">
                <sapn><i class="x-icon">&#xf009;</i>菜单一</sapn>
            </div>
        </li>
        <li class="x-menu-item">
            <div class="x-menu-item-label x-menu-submenu-label"><span><i class="x-icon">&#xf00a;</i>菜单二</span></div>
            <ul class="x-menu-submenu">
                <li class="x-menu-item">
                    <div class="x-menu-item-label">
                        <sapn>子项1</sapn>
                    </div>
                </li>
                <li class="x-menu-item">
                    <div class="x-menu-item-label x-menu-submenu-label"><span>子项2</span></div>
                    <ul class="x-menu-submenu">
                        <li class="x-menu-item">
                            <div class="x-menu-item-label"><span>孙项1</span></div>
                        </li>
                        <li class="x-menu-item">
                            <div class="x-menu-item-label">
                                <sapn>孙项1</sapn>
                            </div>
                        </li>
                        <li class="x-menu-item">
                            <div class="x-menu-item-label"><span>孙项3</span></div>
                        </li>
                    </ul>
                </li>
                <li class="x-menu-item">
                    <div class="x-menu-item-label"><span>子项3</span></div>
                </li>
            </ul>
        </li>
        <li class="x-menu-item">
            <div class="x-menu-item-label"><span><i class="x-icon">&#xf00b;</i>菜单三</span></div>
        </li>
    </ul>
</div>

<div class="x-dropdown" data-trigger="click">
    下拉菜单-右下<i class="x-icon">&#xf107;</i>
    <ul class="x-menu x-menu-float" data-placement="bottomRight" data-trigger="hover">
        <li class="x-menu-item">
            <div class="x-menu-item-label">
                <sapn><i class="x-icon">&#xf009;</i>菜单一</sapn>
            </div>
        </li>
        <li class="x-menu-item">
            <div class="x-menu-item-label x-menu-submenu-label"><span><i class="x-icon">&#xf00a;</i>菜单二</span></div>
            <ul class="x-menu-submenu">
                <li class="x-menu-item">
                    <div class="x-menu-item-label">
                        <sapn>子项1</sapn>
                    </div>
                </li>
                <li class="x-menu-item">
                    <div class="x-menu-item-label x-menu-submenu-label"><span>子项2</span></div>
                    <ul class="x-menu-submenu">
                        <li class="x-menu-item">
                            <div class="x-menu-item-label"><span>孙项1</span></div>
                        </li>
                        <li class="x-menu-item">
                            <div class="x-menu-item-label">
                                <sapn>孙项1</sapn>
                            </div>
                        </li>
                        <li class="x-menu-item">
                            <div class="x-menu-item-label"><span>孙项3</span></div>
                        </li>
                    </ul>
                </li>
                <li class="x-menu-item">
                    <div class="x-menu-item-label"><span>子项3</span></div>
                </li>
            </ul>
        </li>
        <li class="x-menu-item">
            <div class="x-menu-item-label"><span><i class="x-icon">&#xf00b;</i>菜单三</span></div>
        </li>
    </ul>
</div>

<div class="x-dropdown" data-trigger="hover">
    下拉菜单-左上<i class="x-icon">&#xf107;</i>
    <ul class="x-menu x-menu-float" data-placement="topLeft" data-trigger="click">
        <li class="x-menu-item">
            <div class="x-menu-item-label">
                <sapn><i class="x-icon">&#xf009;</i>菜单一</sapn>
            </div>
        </li>
        <li class="x-menu-item">
            <div class="x-menu-item-label x-menu-submenu-label"><span><i class="x-icon">&#xf00a;</i>菜单二</span></div>
            <ul class="x-menu-submenu">
                <li class="x-menu-item">
                    <div class="x-menu-item-label">
                        <sapn>子项1</sapn>
                    </div>
                </li>
                <li class="x-menu-item">
                    <div class="x-menu-item-label x-menu-submenu-label"><span>子项2</span></div>
                    <ul class="x-menu-submenu">
                        <li class="x-menu-item">
                            <div class="x-menu-item-label"><span>孙项1</span></div>
                        </li>
                        <li class="x-menu-item">
                            <div class="x-menu-item-label">
                                <sapn>孙项1</sapn>
                            </div>
                        </li>
                        <li class="x-menu-item">
                            <div class="x-menu-item-label"><span>孙项3</span></div>
                        </li>
                    </ul>
                </li>
                <li class="x-menu-item">
                    <div class="x-menu-item-label"><span>子项3</span></div>
                </li>
            </ul>
        </li>
        <li class="x-menu-item">
            <div class="x-menu-item-label"><span><i class="x-icon">&#xf00b;</i>菜单三</span></div>
        </li>
    </ul>
</div>

<div class="x-dropdown">
    下拉菜单-中上<i class="x-icon">&#xf107;</i>
    <ul class="x-menu x-menu-float" data-placement="topCenter">
        <li class="x-menu-item">
            <div class="x-menu-item-label">
                <sapn><i class="x-icon">&#xf009;</i>菜单一</sapn>
            </div>
        </li>
        <li class="x-menu-item">
            <div class="x-menu-item-label x-menu-submenu-label"><span><i class="x-icon">&#xf00a;</i>菜单二</span></div>
            <ul class="x-menu-submenu">
                <li class="x-menu-item">
                    <div class="x-menu-item-label">
                        <sapn>子项1</sapn>
                    </div>
                </li>
                <li class="x-menu-item">
                    <div class="x-menu-item-label x-menu-submenu-label"><span>子项2</span></div>
                    <ul class="x-menu-submenu">
                        <li class="x-menu-item">
                            <div class="x-menu-item-label"><span>孙项1</span></div>
                        </li>
                        <li class="x-menu-item">
                            <div class="x-menu-item-label">
                                <sapn>孙项1</sapn>
                            </div>
                        </li>
                        <li class="x-menu-item">
                            <div class="x-menu-item-label"><span>孙项3</span></div>
                        </li>
                    </ul>
                </li>
                <li class="x-menu-item">
                    <div class="x-menu-item-label"><span>子项3</span></div>
                </li>
            </ul>
        </li>
        <li class="x-menu-item">
            <div class="x-menu-item-label"><span><i class="x-icon">&#xf00b;</i>菜单三</span></div>
        </li>
    </ul>
</div>

<div class="x-dropdown" data-trigger="click">
    下拉菜单-右上<i class="x-icon">&#xf107;</i>
    <ul class="x-menu x-menu-float" data-placement="topRight" data-trigger="click">
        <li class="x-menu-item">
            <div class="x-menu-item-label">
                <sapn><i class="x-icon">&#xf009;</i>菜单一</sapn>
            </div>
        </li>
        <li class="x-menu-item">
            <div class="x-menu-item-label x-menu-submenu-label"><span><i class="x-icon">&#xf00a;</i>菜单二</span></div>
            <ul class="x-menu-submenu">
                <li class="x-menu-item">
                    <div class="x-menu-item-label">
                        <sapn>子项1</sapn>
                    </div>
                </li>
                <li class="x-menu-item">
                    <div class="x-menu-item-label x-menu-submenu-label"><span>子项2</span></div>
                    <ul class="x-menu-submenu">
                        <li class="x-menu-item">
                            <div class="x-menu-item-label"><span>孙项1</span></div>
                        </li>
                        <li class="x-menu-item">
                            <div class="x-menu-item-label">
                                <sapn>孙项1</sapn>
                            </div>
                        </li>
                        <li class="x-menu-item">
                            <div class="x-menu-item-label"><span>孙项3</span></div>
                        </li>
                    </ul>
                </li>
                <li class="x-menu-item">
                    <div class="x-menu-item-label"><span>子项3</span></div>
                </li>
            </ul>
        </li>
        <li class="x-menu-item">
            <div class="x-menu-item-label"><span><i class="x-icon">&#xf00b;</i>菜单三</span></div>
        </li>
    </ul>
</div>


</body>
</html>
